<template>
	<el-card class="box-card">
		<el-steps :active="5" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="活动图片"></el-step>
		  <el-step title="活动时间"></el-step>
		  <el-step title="活动简介"></el-step>
		  <el-step title="补充说明"></el-step>
		  <el-step title="免费体验"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData">
				<el-form-item class="title">
					<el-col :span="24">免费体验</el-col>
				</el-form-item>
				<el-form-item prop="">
				    <el-checkbox-group v-model="formData.presents" size="medium">
				        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
				    </el-checkbox-group>
				</el-form-item>
			</el-form>
			
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">提交</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import {courseUpdate,courseInfo} from '@/api/getData'
	export default {
		data() {
			return {
				formData: {
					id: "",
					currentStep:"6",
					presentItems:"",
					presents:[]
				},
				cities:["沐浴","餐点","WIFI","停车"],
			}
		},
		mounted() {
			this.formData.id = this.$route.query.id;
			if(this.formData.id != undefined && this.formData.id != ""){
				this.courseInfo(this.formData.id);
			}
		},
		methods: {
			async courseInfo(id) {
				const res = await courseInfo({
					id: id,
				});
				if(res.code == "0") {
					if(res.obj.presentItems != null){
						this.formData.presentItems = res.obj.presentItems;
						this.formData.presents = res.obj.presentItems.split(",");
					}
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async submitForm(formName) {
				
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						
						if(this.formData.presents.length > 0) {
							this.formData.presentItems = this.formData.presents.join(",");
						}
						let res = await courseUpdate(this.formData);

						if(res.code == "0") {
							this.$router.push({
								path: 'activityList',
								query: {
									id: this.$route.query.businessId
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
		width: 50%;
		margin: 10px auto;
	}
	
	.box-row {
		margin: 20px auto;
		width: 100%;
		text-align: center;
	}
	.iconClass{
		font-size: 24px;
		color:#66b1ff;
	}
</style>